<!--suppress ALL -->
<template>


  <el-tabs :tab-position="tabPosition" style="height: 660px;">

    <el-tab-pane>
       <span slot="label" style="text-align:left;font-size:16px"><i class="el-icon-date"></i> 综合管控微服务</span>
      <template>
      <div class="mod-menu">
      <el-table :data="menus" row-key="menuId" border style="width: 100%">
      <el-table-column
        prop="name"
        header-align="center"
        min-width="150"
        label="名称"
      >
      </el-table-column>
      <el-table-column
        prop="level"
        header-align="center"
        align="center"
        width="120"
        label="服务层级"
      >
      </el-table-column>

      <el-table-column
        prop="showStatus"
        header-align="center"
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.showStatus === 0" size="medium" type="danger"
            >关闭</el-tag
          >
          <el-tag
            v-else-if="scope.row.showStatus === 1"
            size="medium"
            type="success"
            >开启</el-tag
          >
          <el-tag
            v-else-if="scope.row.showStatus === null"
            size="medium"
            type="danger"
            >关闭</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="colony"
        header-align="center"
        align="center"
        label="集群数"
      >
      </el-table-column>
      <el-table-column
        prop="example"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="实例数"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="success"
            size="small"
            @click="deleteHandle(scope.row.menuId)"
            >开启</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleteHandle1(scope.row.menuId)"
            >关闭</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="详细"
      >
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="goToUrl(scope.row.menuId)">详细</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
  </div>
</template>
  </el-tab-pane>
    <el-tab-pane label="全要素感知微服务">
    <span slot="label" style="text-align:left;font-size:16px"><i class="el-icon-setting"></i> 全要素感知微服务</span>
      <template>
       <el-row>
  <el-col :span="6" v-for="(o, index) in 3" :key="o" :offset="index > 0 ? 2: 0">
    <el-card shadow="hover" :body-style="{ padding: '0px' }">
      <img src="~@/assets/img/test.jpg" class="image">
      <div style="padding: 25px;">
        <span>全要素感知微服务</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button" @click="goTo()" >服务详细</el-button>
        </div>
      </div>
      <img src="~@/assets/img/test1.jpg" class="image">
      <div style="padding: 25px;">
        <span>协同优化</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button" @click="goTo1()" >服务详细</el-button>
        </div>
      </div>
    </el-card>

  </el-col>
</el-row>
      </template>

      </el-tab-pane>
    <el-tab-pane>
      <span slot="label" style="text-align:left;font-size:16px"><i class="el-icon-refresh"></i> 关键设备诊断微服务</span>
   <template>
      <span>分栏间隔 有效</span>
    <el-row :gutter="24">
      <el-col :span="8">
        <div class="lightgreen-box"><img src="~@/assets/img/test1.jpg" class="image">
      <div style="padding: 25px;">
        <span>协同优化</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button" @click="goTo1()" >服务详细</el-button>
        </div>
      </div></div>
      </el-col>
      <el-col :span="8">
        <div>
          <i class="el-icon-setting" style="font-size: 25px;">测试一下</i>

        </div>

      </el-col>
      <el-col :span="8">
        <div class="lightgreen-box">示例3</div>
      </el-col>
    </el-row>
    <el-divider></el-divider>

   </template>

    </el-tab-pane>
    <el-tab-pane label="协同优化微服务">
          <span slot="label" style="text-align:left;font-size:16px"><i class="el-icon-tickets"></i> 协同优化微服务</span>

      <!-- <span>分栏间隔 有效</span> -->
    <el-row :gutter="24">
      <el-col :span="6">
        <div class="lightgreen-box">
          <i class="el-icon-setting" style="font-size: 50px;"></i>
        <!-- <img src="~@/assets/img/t1.jpg" class="image"> -->
      <div style="padding: 25px;">
        <span>  <span><el-button type="text" class="button_1" @click="goTo()">作业计划分解</el-button></span></span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <!-- <el-button type="text" class="button" @click="goTo()" >服务详细</el-button> -->
        </div>
      </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="lightgreen-box">
          <i class="el-icon-info" style="font-size: 50px;" @click="goTo()" ></i>
        <!-- <img src="~@/assets/img/t1.jpg" class="image"> -->
      <div style="padding: 25px;">
        <span><el-button type="text" class="button_1" @click="goTo()">工位协同优化</el-button></span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <!-- <el-button type="text" class="button" @click="goTo()" style="text-align: center;">服务详细</el-button> -->
        </div>
      </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="lightgreen-box">
           <i class="el-icon-date" style="font-size: 50px;" @click="goTo()" ></i>
        <!-- <img src="~@/assets/img/t1.jpg" class="image"> -->
      <div style="padding: 25px;">
        <span><el-button type="text" class="button_1" @click="goTo()">工位状态监测</el-button></span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <!-- <el-button type="text" class="button" @click="goTo()" style="text-align: center;">服务详细</el-button> -->
        </div>
      </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="lightgreen-box">
              <i class="el-icon-menu" style="font-size: 50px;" @click="goTo()" ></i>
        <!-- <img src="~@/assets/img/t1.jpg" class="image"> -->
      <div style="padding: 25px;">
        <span><el-button type="text" class="button_1" @click="goTo()">协同算法自学习</el-button></span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <!-- <el-button type="text" class="button" @click="goTo()" style="text-align: center;">服务详细</el-button> -->
        </div>
      </div>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>

    </el-tab-pane>


    <el-tab-pane label="虚拟排程微服务">
      <span slot="label" style="text-align:left;font-size:16px"><i class="el-icon-document"></i> 虚拟排程微服务</span>
      定时任务补偿
    </el-tab-pane>
    <el-tab-pane label="质量追溯微服务">
      <span slot="label" style="text-align:left;font-size:16px"><i class="el-icon-news"></i> 质量追溯微服务</span>
    </el-tab-pane>

  </el-tabs>
</template>
<script>
export default {
  data () {
    return {
      tabPosition: 'left',
      currentDate: new Date(),
      menus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    goTo () {
      this.$router.push('/demo-echarts')
    },
    goTo1 () {
      this.$router.push('/demo-ueditor')
    },
    handleNodeClick (data) {
      console.log(data)
    },
    getMenus () {
      this.$http({
        url: this.$http.adornUrl(
          '/service_controller/servicecontroller/list/tree'
        ),
        method: 'get'
      }).then(({ data }) => {
        console.log('成功得到菜單數據。。', data.data)
        this.menus = data.data
      })
    },
    deleteHandle (id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
          return item.menuId
        })
      this.$confirm(
        `确定对服务进行[${id ? '开启' : '批量开启'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl(
            '/service_controller/servicecontroller/delete'
          ),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '开启成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getMenus()
              }
              // this.getMenus();
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    deleteHandle1 (id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
          return item.menuId
        })
      this.$confirm(
        `确定对服务进行[${id ? '关闭' : '批量关闭'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl(
            '/service_controller/servicecontroller/delete1'
          ),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '关闭成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getMenus()
              }
              // this.getMenus();
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // goTo() {
    //   this.$router.push("/i-50");
    // },
    goToUrl (id) {
      var id = id
      this.$http({
        url: this.$http.adornUrl(
          '/service_controller/servicecontroller/Geturl'
        ),
        method: 'post',
        data: this.$http.adornData(id, false)
      }).then(({data}) => {
        console.log(data.url)
        this.$router.push(data.url)
      })
    }
  },
  created () {
    this.getMenus()
  }
}
</script>
<style>
  /* mytab .el-tabs__nav{
    margin-left: 120px;
  } */

  .lightgreen-box {
	  background-color: rgb(254, 255, 254);
	  height: 150px;
    font-size: 15px;
    text-align: center;
	}
	.orange-box {
	  background-color: rgb(255, 0, 0);
	  height: 100px;
	}
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: center;
  }
   .button_1 {
    padding: 0;
    float: center;
    font-size: 15px;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
</style>
<style lang="scss">
.mod-menu {
  .menu-list__input,
  .icon-list__input {
    > .el-input__inner {
      cursor: pointer;
    }
  }
  &__icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
  .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
}
</style>
